<!-- 图像显示会议厅组件 -->
<template>
  <view class="big-box">
    <view class="context">
        <view class="count" v-for="i in timeInfo">
          <!-- 图像 -->
          <view v-if="i.occupied === 0 " class="show tip1"></view>
          <!-- <view v-else-if="i >= 11 && i <= 15" class="show tip2"></view> 蓝色进度条(未启用)-->
          <view v-else-if="i.occupied === 1" class="show tip3"></view>
        </view>
    </view> 
    <view class="timeLand"><text>8:00</text><text>---</text><text>13:00</text><text>---</text><text>18:00</text><text>---</text><text>23:00</text></view> 
  </view>
  
</template>

<script>
import { request } from "@/utils/request";
import funcUtil from '../../../utils/funcUtil'
import timeUtil from '../../../utils/timeUtil';

export default {
  props: {
    id: String
  },
  data() {
    return {
      time: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
      timeShow: [],
      showTime: [],
      timeInfo: []
    }
  },
  computedId() {
      // 使用 prop 的值生成其他数据
      return this.id
  },
  methods:{
     show(){
        for (let i = 0; i < this.showTime.length; i++) {
            if (this.computedId = this.showTime[i].MeetingRoomID) {
              this.timeShow = this.showTime[i]//获取成功
            }
      }
      try {
        //渲染进度条数据
        this.timeInfo = timeUtil.getTimeOccupancyArray(this.timeShow.time);
      }catch(res){}
      },
      getMeetingRoomTime() {
        let promise = request.occupation();
        promise.then((res) => {
             this.showTime = res
        });
    },
    //初始化
    initialization() {
      this.getMeetingRoomTime(); 
      this.show();
      try {
        // uni.setStorageSync(this.timeShow.MeetingRoomID, this.timeShow.time); 
      } catch (e) { }
      // console.log(this.timeShow.time);
      funcUtil.executeWithIntervalAndLimit(2,1000,() => {this.show();})
    }
  },
  created() {
    this.initialization();
  },
}
</script>

<style>
.context {
  /* background-color: antiquewhite; */
  width: 95%;
  display: flex;
  justify-content: space-around;
  margin-left: 3%;
}

.count {
  height: 25rpx;
  width: 60rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  opacity: 0.8;
}

.show {
  height: 90%;
  width: 100%;
  background-color: aqua;
  /* border-radius: 5rpx; */
}

/* 进度条颜色切换 */
.tip1 {
  background-color: #D0D0D0;
}

.tip2 {
  background: linear-gradient(90deg, #9edbfd, #9cdbff);
}

.tip3 {
  background-color: #ffaea9
}

.number {
  color: #AAAAAA;
}

.big-box  {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.timeLand {
   font-size: 30rpx;
   display: flex;
   justify-content: space-around;
   width: 95%;
   color: #acacac;
}
</style>